<template>
  <div class="container">
    <div class="timeShow">
<!--      当前时间：{{showTime2}}-->
      <el-button icon="el-icon-arrow-left" circle style="width: 45px;height: 45px;margin-right: 10px"></el-button>
      <el-card shadow="hover" style="width: 150px;height: 45px;padding: 5px!important;">
        <div>事件时间</div>
        <div style="display: flex;flex-direction: row;">
          <input type="text" style="width: 50%;margin-right: 15px"  v-model="startDate">
          <input type="text" style="width: 50%" v-model="endDate" v-on:keyup.enter="enterTime">
        </div>
      </el-card>
      <el-button icon="el-icon-arrow-right" circle style="width: 45px;height: 45px;margin-left: 10px"></el-button>
    </div>
    <div class="timeLine">
      <VideoTimeline
          ref="Timeline2"
          :initTime="time2"
          @timeChange="timeChange2"
          :timeSegments="timeSegments"
          :initZoomIndex="initZoomIndex"
          @click_timeSegments="click_timeSegments"
          @click_window_timeSegments="click_window_timeSegments"
          @inItemsclick="inItemsclick"
          @upDataTime="upDataTime"
      ></VideoTimeline>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import VideoTimeline from '@/components/src/index'
import {getBytime} from "@/api/login";
export default {
  name:'timeLine',
  data () {
    return {
      // 显示时间段
      initZoomIndex:10,
      time2: '2021-01-15 00:00:00',
      timeSegments: [
      ],
      startDate:'',
      endDate:''
    }
  },
  components:{VideoTimeline},
  computed: {
    // 显示时间段
    showTime2 () {
      return dayjs(this.time2).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  mounted () {
    // 显示时间段
    // setInterval(() => {
    //   this.time2 += 1000
    //   this.$refs.Timeline2.setTime(this.time2)
    // }, 1000)
  },
  methods: {
    // 显示时间段
    timeChange2 (t) {
      this.time2 = t
    },
    inItemsclick(val){
      let time = dayjs(val.beginTime);
      let begin = time.format('YYYY-MM-DD');
      let time2 = dayjs(val.endTime);
      let end = time.format('YYYY-MM-DD')
      console.log(begin,end)
      this.$emit('timeclick',val)
    },
    click_timeSegments (arr) {
      // alert('点击了：' + arr[0].name)
    },
    click_window_timeSegments( data, index, item){
      console.log(data,index.item)
    },
    upDataTime(begin,end){
      this.$emit('upDataTime',begin,end)
    },
    enterTime(){
      let beginData = `${this.startDate.slice(0,4)}`;
      let endData = `${this.endDate.slice(0,4)}`;
      getBytime(beginData,endData).then((res)=>{
        console.log(res);
        this.$emit("timeChange",res)
      })
    }
  },
  watch:{
    endDate(n){
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 50px!important;
  display: flex;
  flex-direction: column;
  .timeLine {
    height: 50px;
  }
}

.timeShow {
  margin: 10px 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  user-select: none;
  color: white;
  flex-direction: row;
}
::v-deep .el-card__body{
  padding: 0px  !important;
}
</style>
